<template>
  <div class="menu-title" :class="isCollapse ? 'title-show' : ''">
    <span v-if="!isCollapse">{{ indexStore.is_general_agent?'OMG总代后台':'OMG总控运营后台' }}</span>
    <div class="menu-switch" :class="isCollapse ? 'menu-show' : ''">
      <el-icon size="24" @click="checkCollapse(true)"><Fold /></el-icon>
    </div>
  </div>
  <el-menu :default-active="defaultActive == '/panel' ? '/' : defaultActive" class="el-menu-vertical" router @click="checkCollapse(false)"
    :collapse="isCollapse" :class="isCollapse ? 'title-show' : ''" :collapse-transition="false" :popper-append-to-body="true">
    <submenu :list="navbars" :isShowCollapse="isCollapse"></submenu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, watch, computed, nextTick } from 'vue'
import submenu from '@/components/menu/submenu.vue'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const navbars = localStorage.getItem('navbars')
  ? JSON.parse(localStorage.getItem('navbars') ?? '')
  : []

const isCollapse = ref(false)

let defaultActive = ref(localStorage.getItem('path'))

const path = computed(() => {
  return indexStore.path
})

watch(path, (val) => {
  defaultActive.value = ''
  if (val) {
    nextTick(() => {
      defaultActive.value = val
    })
  }
})

const emits = defineEmits(['collapse'])

const checkCollapse = (show:boolean) => {
  if(show){
    isCollapse.value = !isCollapse.value
  }else{
    isCollapse.value = false
  }
  emits('collapse', isCollapse.value)
}
</script>

<style scoped lang="scss">
.el-menu {
  user-select: none;
  background: var(--asideMenu);
  color: var(--asideText);
  position: absolute;
  z-index: 2;
  width: 230px;
  margin-left: 15px;
  top: 70px;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 100px;
  box-sizing: border-box;

  :deep(.el-menu-item.is-active) {
    background: var(--el-menu-active-fill);
    border-radius: 3px;
  }

  :deep(.el-menu-item) {
    margin-top: 8px;
  }
}

.el-menu-vertical:not(.el-menu--collapse) {
  min-height: 400px;
}

.el-menu-vertical .el-menu--collapse {
  width: 64px;
  min-height: 400px;
}

.menu-title {
  width: 230px;
  height: 70px;
  margin-left: 15px;
  line-height: 70px;
  font-size: 18px;
  color: var(--asideText);
  z-index: 4;
  cursor: pointer;
  text-align: center;
  border-bottom: 1px solid #b4b4b44d;
  position: relative;

  .menu-switch {
    width: 50px;
    height: 70px;
    line-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0px;
    cursor: pointer;
  }
}

.title-show {
  width: 64px;
  .el-menu{
    font-size: 20px !important;
  }
}

.menu-show {
  position: absolute;
  top: 0;
  left: 6px;
}


</style>